<template>
	<div class="company-list">
		<list-title :data="header"></list-title>
		<div class="search">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="客户名称">
					<el-input v-model="searchForm.company_name" placeholder="客户名称"></el-input>
				</el-form-item>
				<el-form-item label="地区">
					<el-select v-model="checkProvince" placeholder="省" @change="getCityByProvince('')">
						<el-option v-for="(item, index) in provinceList" :key="index" :label="item.areaname" :value="item.id"></el-option>
					</el-select>
					<el-select v-model="checkCity" placeholder="市">
						<el-option v-for="(item, index) in cityList" :key="index" :label="item.areaname" :value="item.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="状态">
					<el-select v-model="searchForm.state" placeholder="状态">
						<el-option label="启用" value="1"></el-option>
						<el-option label="等待审核" value="2"></el-option>
						<el-option label="审核不通过" value="3"></el-option>
						<el-option label="注销" value="4"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="添加时间">
					<el-date-picker
					v-model="searchForm.regTime"
					type="daterange"
					format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" @click="searchSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<list-table :list="companyList" :tableLoading="tableLoading" :footer="true" :pagination="pagination">
			<template v-slot:data>
				<el-table-column prop="companyInfo" label="客户名称">
					<template slot-scope="scope">
						<div v-html="scope.row.companyName"></div>
						<div v-html="scope.row.companyProfile"></div>
					</template>
				</el-table-column>
				<el-table-column prop="province" label="区域地址">
					<template slot-scope="scope">
						<span v-html="scope.row.province + '/' + scope.row.city"></span>
					</template>
				</el-table-column>
				<el-table-column prop="comid" label="COMID" show-overflow-tooltip></el-table-column>
				<el-table-column prop="contactsInfo" label="联系人信息">
					<template slot-scope="scope">
						<div v-for="(item, index) in scope.row.contacts" :key="index" v-html="scope.row.contacts[index] + '/' + scope.row.phones[index]"></div>
					</template>
				</el-table-column>
				<el-table-column prop="state" label="当前状态"></el-table-column>
				<el-table-column prop="addTime" label="添加时间"></el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-button type='text' size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button type='text' size="mini" @click="manage(scope.$index, scope.row)">管理</el-button>
					</template>
				</el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {filterEmpty, getNavbarByMenuList, judgeAuth} from "static/js/common.js"
import {SEC_NAVBAR_COMPANY} from '@/config/backArgs.js'
import {mapMutations} from 'vuex'
import {mapGetters} from 'vuex'
export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '客户列表',
				reload: true,
				buttons: [
					{
						title: '添加客户',
						type: 'primary',
						pathName: 'pc/company/company/Company',
						auth: false,
					}
				]
			},
			/*搜索*/
			searchForm: {
				company_name: this.$route.query.company_name,
				province: this.$route.query.province,
				city: this.$route.query.city,
				state: this.$route.query.state,
				regTime: (this.$route.query.begin_time!=undefined)?[this.$route.query.begin_time, this.$route.query.end_time]:'',
				// regTime: '',
			},
			provinceList: [],//省份
			cityList: [],//省份
			companyList: [
				// {
				// 	id: 1,
				// 	companyName: '昊视科技',
				// 	companyProfile: '营业执照',
				// 	province: '省',
				// 	city: '市',
				// 	comid: '00000000',
				// 	contacts: '高见',
				// 	phones: '13915028703',
				// 	state: 2,
				// 	addTime: '2019-09-09 08:08:08',
				// },
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			tableLoading: true,
		};
	},
	components: {
		ListTitle,
		ListTable,
	},
	created: function() {
		/*获取所有客户数据*/
		this.getCompanyList()
		/*获取所有省份数据*/
		this.getProvinceList()
		if(this.$route.query.province != undefined){
			/*如果搜搜栏有市数据，则获取市数据*/
			this.getCityByProvince(this.$route.query.city)
		}
		/*权限判断显示*/
		this.header.buttons[0].auth = (judgeAuth('addCompany', this.allMenuList) == undefined)?false:true
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getCompanyList()
			/*点击navbar的时候，路由产生变化*/
			this.searchForm.company_name = this.$route.query.company_name
			this.searchForm.province = this.$route.query.province
			this.searchForm.city = this.$route.query.city
			this.searchForm.state = this.$route.query.state
			this.searchForm.regTime = (this.$route.query.begin_time!=undefined)?[this.$route.query.begin_time, this.$route.query.end_time]:''
		}
	},
	methods: {
		/*获取客户列表*/
		getCompanyList: function(){
			// this.$baseURL('http://super.ac.comdd')
			this.$get(this.$api.companyList, this.$route.query).then(res => {
				// console.log(res);
				if(res.data.code == 10007){//后台提示需要登录
					this.$cookie.remove('isLogin');//刪除cookie登录信息
					this.reload();
				}
				if(res.data.code === 0){
					if(res.data.data.list != undefined){
						this.companyList = []
						Object.keys(res.data.data.list).forEach((k) => {
							let state = '启用';
							switch(res.data.data.list[k].state){
								case '2':
									state = '等待审核';
									break;
								case '3':
									state = '审核不通过';
									break;
								case '4':
									state = '已注销';
									break;
							}
							this.companyList.push ({
								id: res.data.data.list[k].comid,
								companyName: res.data.data.list[k].company_name,
								companyProfile: res.data.data.list[k].business_license,
								province: (res.data.data.list[k].province != null)?res.data.data.list[k].province.areaname:"",
								city: (res.data.data.list[k].city != null)?res.data.data.list[k].city.areaname:"",
								comid: res.data.data.list[k].comid,
								contacts: res.data.data.list[k].contacts.split(','),
								phones: res.data.data.list[k].phones.split(','),
								state: state,
								addTime: res.data.data.list[k].add_time
							});
						})
						this.pagination = res.data.data.pageInfo
					}
					this.tableLoading = false
				}
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*编辑客户*/
		handleEdit(index, row) {
			// console.log(row.id);
			this.$router.push({ name: 'pc/company/company/Company', query: {id: row.id}})
		},
		/*管理*/
		manage(index, row) {
			// console.log(row);
			this.$router.push({
				name: SEC_NAVBAR_COMPANY.routerto,
				query: {
					'comid': row.comid
				}
			})
			let navbarBack = getNavbarByMenuList(this.allMenuList, SEC_NAVBAR_COMPANY.curr_menu_id)//39是在数据库中查看的
			this.setNavbar({title: 'back', list: navbarBack, routerName: SEC_NAVBAR_COMPANY.backrouter})//把 navbar数据 存入vuex
			this.$localstorage.set('navbarBack', JSON.stringify(
				{
					menuID: SEC_NAVBAR_COMPANY.curr_menu_id, //刷新的时候，Sidebar组件 取此值
					routerName: SEC_NAVBAR_COMPANY.backrouter, //刷新的时候，Sidebar组件 取此值
					currNavbarID: parseInt(this.$localstorage.get('currNavbarID')),//为了返回后，能够高亮当前navbar
					comID: row.comid//关闭浏览器，重启输入网址进入登录页面，如果没有此值，将取不到相应数据，navbar组件将先到地址栏获取参数，再到这里取值
				}
			));//保存navbar组件的返回路由名称、当前的父ID		
			// this.$localstorage.set('navbarBack', JSON.stringify(
			// 	{
			// 		menuID: 23, 
			// 		routerName: 'pc/company/company/CompanyList', 
			// 		currNavbarID: parseInt(this.$localstorage.get('currNavbarID'))//为了返回后，能够高亮当前navbar
			// 	}
			// 	));//保存navbar组件的返回路由名称、当前的父ID
			// this.$sessionStorage.set('comid', row.id);//comid存入sessionStorage中
			
		},
		/*获取所有省份数据*/
		getProvinceList: function(){
			this.$get(this.$api.provinceList).then(res => {
				// console.log(res);
				if(res.data.code === 0){
					if(res.data.data != undefined){
						this.provinceList = res.data.data
					}
				}
			})
			.catch(err => {})
			.finally(() => {})
		},
		/*根据省份ID获取城市数据*/
		getCityByProvince: function(city){
			if(city == ''){
				this.searchForm.city = ''//清空已经选择的城市数据
			}else{
				this.searchForm.city = city//刷新页面的时候，有可能会出现有默认城市的情况
			}
			this.cityList = []//清空所有的城市，因为需要更新数据
			if(this.searchForm.province != ''){
				this.$get(this.$api.cityList, {
					'id': this.searchForm.province
				}).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.cityList = res.data.data
						}
					}
				})
				.catch(err => {})
				.finally(() => {})
			}
		},
		/*搜索提交*/
		searchSubmit: function(){
			let query = filterEmpty(JSON.parse(JSON.stringify(this.searchForm)))
			if(query.regTime != undefined){
				query = Object.assign({begin_time: query['regTime'][0], end_time: query['regTime'][1]}, query)
				delete query['regTime']
			}
			this.$router.push({query})
		},
		...mapMutations({
			setNavbar: 'setNavbar'
		})
	},
	computed: {
		/*验证省份是否已经获取到，有了数据才展示,防止直接出现数字，比较尴尬*/
		checkProvince: {
			get: function () {
				if(this.provinceList.length > 0){
					return this.searchForm.province
				}else{
					return ''
				}
			},
			set: function (val) {
				this.searchForm.province = val
			}
		},
		/*验证城市是否已经获取到，有了数据才展示,防止直接出现数字，比较尴尬*/
		checkCity: {
			get: function () {
				if(this.cityList.length > 0){
					return this.searchForm.city
				}else{
					return ''
				}
			},
			set: function (val) {
				this.searchForm.city = val
			}
		},
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
.company-list
	.search
		margin-top: 10px
		.el-form-item--small.el-form-item
			margin-bottom: 0px
</style>